<template>
  <view class="container">
    <view class="form-wrapper">
      <text class="title">登录</text>

      <input 
        class="input-item" 
        type="text" 
        placeholder="请输入用户名" 
        v-model="username" 
        placeholder-class="placeholder-style"
      />

      <view class="password-input-wrapper">
        <input 
          class="input-item password-input" 
          :type="showPassword ? 'text' : 'password'" 
          placeholder="请输入密码" 
          v-model="password" 
          placeholder-class="placeholder-style"
        />
        <uni-icons 
          class="eye-icon"
          type="eye" 
          size="20" 
          color="#999"
          @click="togglePasswordVisibility"
          v-if="showPassword"
        ></uni-icons>
        <uni-icons 
          class="eye-icon"
          type="eye-slash" 
          size="20" 
          color="#999"
          @click="togglePasswordVisibility"
          v-else
        ></uni-icons>
      </view>

      <button 
        class="btn login-btn" 
        type="primary" 
        @click="handleLogin"
        :loading="isLoading"
      >
        登录
      </button>

      <view class="link-group">
        <text class="link-text">没有账号？</text>
        <navigator 
          url="/pages/Register/Register" 
          class="nav-link"
        >
          去注册
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '', 
      isLoading: false,
      showPassword: false 
    };
  },
  methods: {
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },

    handleLogin() {
      if (!this.username.trim()) {
        return this.showToast('请输入用户名');
      }
      if (!this.password.trim()) {
        return this.showToast('请输入密码');
      }
    
      this.isLoading = true;
    
      setTimeout(() => {
        if (this.username === 'lkw' && this.password === '123456') {
          uni.setStorageSync('userInfo', {
            username: this.username,
            loginTime: new Date().getTime()
          });
    
          this.isLoading = false;
          this.showToast('登录成功', 'success');
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/tabBar/tabcomponent/tabcomponent'
            });
          }, 1000);
        } else {
          this.isLoading = false;
          this.showToast('密码错误，请重新输入');
        }
      }, 1500);
    },

    showToast(title, icon = 'none') {
      uni.showToast({
        title,
        icon,
        duration: 2000
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  padding-top: 100rpx;
  padding-bottom: 160px;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

.form-wrapper {
  width: 90%;
  max-width: 500rpx;
  background-color: #fff;
  padding: 60rpx 40rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.title {
  display: block;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 60rpx;
}

.input-item {
  width: 100%;
  height: 90rpx;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.placeholder-style {
  color: #999;
}

.password-input-wrapper {
  position: relative;
  margin-bottom: 30rpx;
}

.password-input {
  padding-right: 80rpx;
  margin-bottom: 0; 
}

.eye-icon {
  position: absolute; 
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border-radius: 8rpx;
  margin-bottom: 40rpx;
}

.login-btn {
  background-color: #007aff;
}
.login-btn:active {
  background-color: #0066cc;
}

.link-group {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
}

.link-text {
  color: #666;
}

.nav-link {
  color: #007aff;
  margin-left: 10rpx;
  text-decoration: none;
}
</style>